<template>
  <div class="work-order-list" v-loading="loading">
    <div 
      v-for="order in orders" 
      :key="order.id" 
      class="work-order-card"
      @click="$emit('viewDetail', order)"
    >
      <div class="order-header">
        <div class="order-number">{{ getDeviceCode(order) || order.order_number }}</div>
        <el-tag 
          :type="getStatusType(order.status)" 
          size="small"
        >
          {{ getStatusText(order.status) }}
        </el-tag>
      </div>
      <div class="order-title">{{ getDeviceName(order) || '未知设备' }}</div>
      <div class="order-info">
        <div class="info-item">
          <el-icon><User /></el-icon>
          <span>负责人：{{ order.assignee_name || '未分配' }}</span>
        </div>
        <div class="info-item">
          <el-icon><Clock /></el-icon>
          <span>发生日期：{{ formatDate(getOccurrenceDate(order)) }}</span>
        </div>
      </div>
      
      <!-- 操作按钮 -->
      <div class="order-actions" @click.stop>
        <el-button 
          v-if="order.status === 'pending'"
          type="primary" 
          size="small"
          @click="$emit('acceptOrder', order)"
        >
          接单
        </el-button>
        <el-button 
          v-if="order.status === 'in_progress' && order.assignee_id === currentUserId"
          type="success" 
          size="small"
          @click="$emit('showFeedback', order)"
        >
          反馈
        </el-button>
        <el-button 
          v-if="order.status === 'in_progress' && order.assignee_id === currentUserId"
          type="warning" 
          size="small"
          @click="$emit('editOrder', order)"
        >
          回单
        </el-button>
      </div>
    </div>
    
    <div v-if="orders.length === 0" class="empty-state">
      <el-empty description="暂无工单" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Clock, User } from '@element-plus/icons-vue'

interface WorkOrder {
  id: number
  order_number: string
  title?: string
  status: string
  priority: string
  location?: string
  created_at: string
  creator_name?: string
  assignee_id?: number
  assignee_name?: string
  custom_fields?: {
    [key: string]: {
      value: any
      field_type: string
      label: string
    }
  }
}

defineProps<{
  orders: WorkOrder[]
  loading: boolean
  currentUserId?: number
}>()

defineEmits<{
  viewDetail: [order: WorkOrder]
  acceptOrder: [order: WorkOrder]
  showFeedback: [order: WorkOrder]
  showComplete: [order: WorkOrder]
  editOrder: [order: WorkOrder]
}>()

// 工具方法
const getStatusType = (status: string) => {
  const types: Record<string, string> = {
    pending: 'warning',
    assigned: 'info',
    in_progress: 'primary',
    completed: 'success',
    cancelled: 'danger'
  }
  return types[status] || 'info'
}

const getStatusText = (status: string) => {
  const texts: Record<string, string> = {
    pending: '待处理',
    assigned: '已分配',
    in_progress: '处理中',
    completed: '已完成',
    cancelled: '已取消'
  }
  return texts[status] || status
}



const formatDate = (dateString: string) => {
  if (!dateString) return ''
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取设备编号（点位编号）
const getDeviceCode = (order: WorkOrder) => {
  return order.custom_fields?.['点位编号']?.value || ''
}

// 获取设备名称
const getDeviceName = (order: WorkOrder) => {
  return order.custom_fields?.['设备名称']?.value || ''
}

// 获取发生日期（掉线日期时间）
const getOccurrenceDate = (order: WorkOrder) => {
  return order.custom_fields?.['掉线日期时间']?.value || order.created_at
}
</script>

<style scoped>
.work-order-list {
  padding: 16px;
}

.work-order-card {
  background: white;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.work-order-card:active {
  transform: scale(0.98);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.order-number {
  font-size: 14px;
  font-weight: 600;
  color: #409eff;
  /* 防止长文本溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.order-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
  /* 防止长文本溢出 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.order-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #666;
  font-weight: 500;
  /* 防止长文本溢出 */
  overflow: hidden;
}

.info-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.order-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.empty-state {
  text-align: center;
  padding: 40px 20px;
}

/* 响应式设计 */
@media (max-width: 480px) {
  .work-order-list {
    padding: 12px;
  }
  
  .work-order-card {
    padding: 12px;
  }
}
</style>